import React from 'react';
import style from './style.less';
import echarts from 'echarts';

class BarTable extends React.Component {

    constructor( props ) {
        super( props )
        this.state = {
            table: '',
            timer: ''
        }
    }

    resizeEvent = () => {

        console.log( 'resize' );
        if ( this.state.timer ) {
            clearTimeout( this.state.timer );
        }

        const timer = setTimeout( () => {
            this.state.table.resize();
        }, 200 );

        this.setState( {
            timer: timer
        } )
    }

    componentDidMount() {

        const table = echarts.init( document.getElementById( 'barTable' ) );

        table.setOption( {
            xAxis: {
                type: 'category',
                data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]
            },
            yAxis: {
                type: 'value'
            },
            series: [ {
                data: [ 120, 200, 150, 80, 70, 110, 130 ],
                type: 'bar'
            } ]
        } );

        this.setState( {
            table: table
        }, () => {
            this.state.table.resize();
        } );

        window.addEventListener( 'resize', this.resizeEvent, false )

    }

    componentWillUnmount() {
        window.removeEventListener( 'resize', this.resizeEvent, false );
    }

    render() {

        return (

            <div className={style.barTable}>
                <span className={style.title}>饼形图</span>
                <div className={style.table} id='barTable'></div>
            </div>
        )
    }
}

export default BarTable;